<template>
  <div class="detail">
    <section class="detail-info">
      <h6 class="detail-info__title">{{ productSetObj.name }}</h6>
      <main class="detail-info__container">
        <p>产品集编码：{{ productSetObj.code }}</p>
        <p>状态：{{ STATUS[productSetObj.status] }}</p>
        <p>所属项目：{{ productSetObj.appName }}</p>
        <p>创建时间：{{ productSetObj.createDate }}</p>
      </main>
    </section>
    <ProductInfo :productSetCode="productSetObj.code"></ProductInfo>
  </div>
</template>

<script>
import ProductInfo from '../components/ProductInfo.vue'
import { STATUS } from '@/constants/baseModel.js'

export default {
  name: 'productDetail',
  components: {
    ProductInfo,
  },
  data() {
    return {
      STATUS,
      productSetObj: {},
    }
  },
  methods: {
    async getSourceListRequest() {
      return await this.$http.get(`/app/list`)
    },
    async getDetailRequest() {
      const res = await this.$http.get(`/product_sets/${this.$route.query.productSetId}`)
      let appName = null
      if (res) {
        const sourceList = await this.getSourceListRequest()
        if (sourceList) {
          sourceList.forEach(item => {
            if (item.code === res.appCode) {
              appName = item.name
            }
          })
          this.productSetObj = { ...res, appName: appName }
        }
      }
    },
  },
  mounted() {
    this.getDetailRequest()
  },
}
</script>

<style lang="scss" scoped>
@import './index.scss';
</style>
